
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>购物商城-订单信息</title>
    <base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/"/>
    <style>
        * {
            margin: 0 auto;
            padding:0;
            list-style: none;
        }
        .header-a{
            text-decoration: none;
            color: #CCCCCC;
        }
        .header-a:hover{
            color: black;
        }
        .header_li1{
            float: left;
            line-height: 30px;
            margin-left: 24px;
            text-align: center;
        }
        .header_li1 a{
            color:#FFFFFF;
            text-decoration: none;
            font-size: 13px;
            border-right: #CCCCCC;
        }
        .header_li1 a:hover{
            color:#FFFF00;
        }
        .li1{
            height: 30px;
            line-height: 30px;
            margin-left: 5px;
            border-bottom: 1px solid #000000;
            font-size: 12px;
        }
        .li1a{
            text-decoration: none;
        }
        .span1{
            color:#F5D687;
            font-size: 18px;
            position: absolute;
            right: 5px;
        }
        .imag{
            padding-top: 5px;
            /*height:130px;*/
            height: 80px;
        }
        .table_div:hover{
            border:2px solid lightskyblue;
        }
        .table_div {
            border: 2px solid #DDDDDD;
            height: 100px;
            width: 160px;
        }
        table tr td a {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient: vertical;
        }
    </style>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script>


        $(function () {
            var userName = "${user.name}"
            var text = "[<a href= 'toLoginPage'>登录</a>]&nbsp;[<a href= 'toRegisterPage'>免费注册</a>]"
            if(userName != "") {
                text = userName + "&nbsp;&nbsp[<a href= 'logout'>注销</a>]";
            }
            $("#loginSpan").html(text)
            <c:forEach items="${orderDetailVOList}" var="orderDetailVO">
                $("#${orderDetailVO.orderId}").html(parseFloat(${orderDetailVO.amount}).toFixed(2))
                <c:forEach items="${orderDetailVO.articleVOList}" var="articleVO" >
                    $("#${articleVO.onlyOne}").html(parseFloat(${articleVO.price * articleVO.discount}).toFixed(2))
                </c:forEach>
            </c:forEach>
            $("input[type='checkbox']").click(function () {
                var that = $(this)
                $(this).parent().parent().parent().parent().next().each(function () {
                    if(that.is(":checked")){
                        $(this).show();    //如果元素为隐藏,则将它显现
                    }else{
                        $(this).hide();     //如果元素为显现,则将其隐藏
                    }
                })
            })
        });


    </script>
</head>
<body>

<div style="height: 32px;width: 100%;background-color: #EFEFEF;">
    <!--头页的第一部分-->
    <div style="height: 32px;width: 1000px;font-size: 12px;line-height: 32px;text-align:right">
        官方网站<a href="https://www.douyu.com/directory/myFollow">http://gz.gec-edu.org/?gzbdgzbdyueqianpc23</a>
        <span id="loginSpan"></span>
        [<a href="toShopCarPage">我的购物车</a>]
        [<a href="toOrderDetailPage">我的订单</a>]
        [<a href="#">设置为首页</a>]
        [<a href="#">加入收藏</a>]
    </div>
    <!--头页的第二部分-->
    <div style="width: 1000px;height: 150px;;position: relative">
        <img src="images/article/logo.gif">
        <img src="images/banner.gif" alt="" style="margin-top: 10px">

        <div style="position: absolute;right: 50px;top: 30px;font-size: 12px">
            <div style="border: 1px solid #CCCCCC;width: 70px;height: 20px;line-height:20px;text-align: center"><a href="#" style="" class = "header-a">关于我们</a></div>
            <div style="margin-top: 10px;border: 1px solid #CCCCCC;width: 70px;height: 20px;line-height:20px;text-align: center"><a href="#" style="" class = "header-a">联系方式</a></div>
        </div>
    </div>
    <!--头页的第三部分-->
    <div style="width: 100%;height: 30px;background-color: #CC3333 ">
        <div style="width: 1000px;height: 30px;">
            <ul>
                <li class="header_li1"><a href="#"> 首页</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0001"> 护肤</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0002"> 彩妆</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0003"> 香氛</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0004"> 身体护理</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0005"> 礼盒套装</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0006"> 母婴专区</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0007"> 男士专区</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0008"> 粉底</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0009"> 粉饼</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0010"> 睫毛膏</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0011"> 唇彩</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0012"> 腮红</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0013"> 食品保障</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0014"> 瘦身类</a></li>
                <li class="header_li1"><a href="getArticleType?type_code=0015"> 美容类</a></li>
            </ul>

        </div>

    </div>
</div>


<div style="width: 1000px;height: 1500px; background-color: #AACDED;margin-top: 180px;padding: 7px">
    <p style="font-weight: bold;margin-left: 20px;font-size: 16px;margin-top: 10px">订单信息查询</p>
    <div style="padding: 10px;margin-top: 15px;width: 98%;height: 1480px;background-color: #FFF;border-radius: 3px">
        <p style="margin-left: 10px;margin-top: 5px;font-size: 18px;font-weight: bold"><span><span style="color: red">帅哥美女:</span>您好:您当前共有[<span>${orderDetailVOList.size()}</span>]个订单:(点击订单可显示该订单下的购物明细)</span></p>
        <div style="padding: 10px">
                    <c:forEach items="${orderDetailVOList}" var="orderDetailVO">
                    <table style="width: 100%;text-align: center;font-size: 14px;border-collapse: collapse;border: 1px solid #ccc">
                        <tr style="background-color: #FFF4D7;border:#E2DED1 3px solid;height: 40px">
                            <td style="width: 30%;">订单编号</td>
                            <td style="width: 20%;">下单时间</td>
                            <td style="width: 20%;">发货时间</td>
                            <td style="width: 15%;">订单状态</td>
                            <td style="width: 15%;">订单总额</td>
                        </tr>
                        <tr style="height: 30px;">
                            <td><input type="checkbox"><span>${orderDetailVO.orderCode}</span></td>
                            <td >${orderDetailVO.createDate}</td>
                            <td >${orderDetailVO.sendDate}</td>
                            <td>商家已付款</td>
                            <td id="${orderDetailVO.orderId}">${orderDetailVO.amount}</td>
                        </tr>
                    </table>
                    <table  style="width: 100%;text-align: center;font-size: 14px;border-collapse: collapse;border: 1px solid #ccc;display: none">
                        <tr style="background-color: #E2DED1;height: 40px;">
                            <td style="width: 30%;">物品图片</td>
                            <td style="width: 20%;">标题</td>
                            <td style="width: 20%;">供应商</td>
                            <td style="width: 15%;">价格</td>
                            <td style="width: 15%;">购买数量</td>
                        </tr>
                        <c:forEach items="${orderDetailVO.articleVOList}" var="articleVO">
                            <tr>
                                <td><img src="images/article/${articleVO.image}" alt="" style="width: 100px;"></td>
                                <td><a href="toArticleInfoPage?articleId=${articleVO.articleId}">${articleVO.title}</a></td>
                                <td>${articleVO.supplier}</td>
                                <td id="${articleVO.onlyOne}">${articleVO.price * articleVO.discount}</td>
                                <td>${articleVO.buyNum}</td>
                            </tr>
                        </c:forEach>
                    </table>
                    </c:forEach>
        </div>
    </div>
</div>
<div style="width: 1000px;margin-top: 40px">
    <img src="images/step.jpg" alt="">
</div>
</body>
</html>
